.layout {
    margin-top: 95/37.5rem;
    margin-bottom: 100/37.5rem;
    //头部
    .header {
        width: 100%;
        height: 95/37.5rem;
        text-align: center;
        line-height: 95/37.5rem;
        color: #a3a3a3;
        font-size: 30/37.5rem;
        box-sizing: border-box;
        border-bottom: 1px solid #ebeaea;
        background-color: #fff;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 2;
    }
    .hideVideoContainer {
        display: none;
    }
    .showVideoContainer {
        display: block;
    }
    //视频
    .videoContainer {
        width: 100%;
        height: 634/37.5rem;
        border-bottom: 1px solid #ebeaea;
        position: relative;
        .video {
            width: 100%;
            height: 424/37.5rem;
            video {
                width: 100%;
                height: 100%;
                object-fit:fill;
            }
        }
        .videoMsg {
            .videoTitle {
                width: 100%;
                box-sizing: border-box;
                padding-top: 28/37.5rem;
                h3 {
                    padding: 0 100/37.5rem 0 42/37.5rem;
                    line-height: 60/37.5rem;
                    font-size: 36/37.5rem;
                    color: #141414;
                }
            }
            .playAndClick {
                width: 100%;
                padding: 0 42/37.5rem;
                height: 48/37.5rem;
                line-height: 48/37.5rem;
                box-sizing: border-box;
                position: absolute;
                left: 0;
                bottom: 15/37.5rem;
                .videoPlayTimes {
                    float: left;
                    font-size: 20/37.5rem;
                    color: #a3a3a3;
                }
                .addToPraise {
                    position: absolute;
                    right: 42/37.5rem;
                    width: 67/37.5rem;
                    font-size: 18/37.5rem;
                    text-align: right;
                    background: url("../../img/xzan@3x.png") no-repeat left center;
                    background-size: 40/37.5rem 40/37.5rem;
                }
            }
        }
    }
    .hideNewsArticle {
        display: none;
    }
    .showNewsArticle {
        display: block;
    }
    //文章
    .newsArticle {
        width: 100%;
        padding: 37/37.5rem 30/37.5rem 0 30/37.5rem;
        box-sizing: border-box;
        .newsTitle {
            margin-bottom: 48/37.5rem;
            h1 {
                font-size: 48/37.5rem;
                line-height: 72/37.5rem;
            }
        }
        .newsSource {
            margin-bottom: 30/37.5rem;
            .newsSourceImg {
                float: left;
                width: 67/37.5rem;
                height: 67/37.5rem;
                background: url("../../img/XW_dshede@3x.png") no-repeat left center;
                background-size: 67/37.5rem 67/37.5rem;
                margin-right: 15/37.5rem;
            }
        }
        .newsSourceNameAndDate {
            height: 68/37.5rem;
            .name {
                font-size: 26/37.5rem;
                color: #141414;
                height: 42/37.5rem;
                line-height: 42/37.5rem;
            }
            .date {
                font-size: 20/37.5rem;
                color: #a3a3a3;
            }
        }
        .newsArticleContent {
            p {
                font-size: 25/37.5rem;
            }
        }
        .newsAticleClick {
            .newsAticleClickImgAndClicNum {
                margin: 120/37.5rem 0;
                .newsAticleClick {
                    width: 90/37.5rem;
                    height: 90/37.5rem;
                    background: url("../../img/zan_U@3x.png") no-repeat left center;
                    background-size: 90/37.5rem 90/37.5rem;
                    margin:0 auto;
                }
                .newsAticleClickNum {
                    text-align: center;
                    font-size: 22/37.5rem;
                    margin-top: 22/37.5rem;
                }
            }
        }
        
    }
    //推荐新闻
    .showByVideo,.showByArticl {
        display: none;
    }
    .recommendNews {
        width: 100%;
        padding: 0 20/37.5rem;
        box-sizing: border-box;
        .newItem:nth-child(1) {
            border-top: 1px solid #ebebeb;
        }
        .newItem {
            width: 100%;
            height: 200/37.5rem;
            border-bottom: 1px solid #ebebeb;
            padding: 20/37.5rem 0;
            box-sizing: border-box;
            position: relative;
            .newImgOrVideo {
                float: left;
                width: 220/37.5rem;
                height: 160/37.5rem;
                background-color: skyblue;
                margin-right: 22/37.5rem;
                position: relative;
                img {
                    width: 100%;
                }
                .playBtn {
                    position: absolute;
                    bottom: 10/37.5rem;
                    right: 20/37.5rem;
                    width: 40/37.5rem;
                    height: 40/37.5rem;
                    background: url("../../img/XW_play@3x.png") no-repeat left center;
                    background-size: 40/37.5rem 40/37.5rem;
                }
            }
            .newsTitle {
                margin-left: 220/37.5rem;
                width: 435/37.5rem;
                line-height: 46/37.5rem;
                margin-bottom: 16/37.5rem;
                h3 {
                    font-size: 32/37.5rem;
                    color: #141414;
                }
            }
            .newsSourceAndRead {
                height: 40/37.5rem;
                line-height: 40/37.5rem;
                float: left;
                .newsSource,.nenwsRead {
                    font-size: 20/37.5rem;
                    color: #a3a3a3;
                }
                .newsSource {
                    float: left;
                    padding-left: 33/37.5rem;
                    text-align: right;
                    background: url("../../img/XW_lshede@3x.png") no-repeat left center;
                    background-size: 30/37.5rem 30/37.5rem;
                    position: absolute;
                    left: 240/37.5rem;
                    bottom: 28/37.5rem;
                }
                .nenwsRead {
                    float: left;
                    position: absolute;
                    right: 0;
                    bottom: 28/37.5rem;
                }
            }
        }
    }
    //新闻评论
    .newsComments {
        .msgAndComment {
            width: 100%;
            height: 183/37.5rem;
            padding-top: 75/37.5rem;
            box-sizing: border-box;
            .msgAndCommentImg {
                width: 155/37.5rem;
                height: 60/37.5rem;
                background-color: #ccc;
                margin: 0 auto;
                background: url("../../img/liuyan@3x.png") no-repeat left center;
                background-size: 155/37.5rem 60/37.5rem;
            }
        }
        .userComments {
            .userCommentItem {
                padding: 0 40/37.5rem 35/37.5rem 40/37.5rem;
                .userHeader {
                    float: left;
                    width: 70/37.5rem;
                    height: 70/37.5rem;
                    background: skyblue;
                    border-radius: 50%;
                    overflow: hidden;
                    margin-right: 20/37.5rem;
                    img {
                        width: 100%;
                    }
                }
                .commentContainer {
                    float: left;
                    width: 575/37.5rem;
                    .usernameAndReply {
                        margin-bottom: 16/37.5rem;
                        .userName {
                            float: left;
                            font-size: 22/37.5rem;
                            font-weight: 700;
                            .replySomeone {
                                padding: 0 15/37.5rem;
                                color: #227df5;
                            }
                        }
                        .reply {
                            float: right;
                            font-size: 22/37.5rem;
                            a {
                                color: #3694ff;
                            }
                        }
                    }
                    .content {
                        float: left;
                        font-size: 25/37.5rem;
                        line-height: 35/37.5rem;
                        color: #a3a3a3;
                    }
                }  
            }
        }
    }
    //更多评论
    .moreComment {
        width: 100%;
        height: 94/37.5rem;
        padding-top: 27/37.5rem;
        box-sizing: border-box;
        .moreCommentsBtn {
            width: 226/37.5rem;
            height: 40/37.5rem;
            text-align: center;
            line-height: 40/37.5rem;
            font-size: 16/37.5rem;
            color: #141414;
            border-radius: 10px;
            background-color: #e0e0e0;
            margin: 0 auto;
        }
    }
    //底部
    .writeComment {
        width: 100%;
        height: 100/37.5rem;
        padding: 16/37.5rem 30/37.5rem;
        box-sizing: border-box;
        border-top: 1px solid #ebebeb;
        border-bottom: 1px solid #ebebeb;
        background-color: #fff;
        position: fixed;
        left: 0;
        bottom: 0;
        .input {
            input {
                float: left;
                border: none;
                outline: none;
                width: 400/37.5rem;
                height: 68/37.5rem;
                border-radius: 30px;
                padding-left: 40/37.5rem;
                box-sizing: border-box;
                background-color: #f0f0f0;
            }
            span {
                float: left;
            }
            .commentMsg {
                width: 42/37.5rem;
                height: 68/37.5rem;
                margin-left: 55/37.5rem;
                background-color: skyblue;
                background: url("../../img/XW_message@3x.png") no-repeat left center; 
                background-size: 45/37.5rem 43/37.5rem;
                position: relative;
                .commentMsgNumber {
                    position: absolute;
                    top: 10/37.5rem;
                    left: 27/37.5rem;
                    width: 50/37.5rem;
                    height: 24/37.5rem;
                    font-size: 14/37.5rem;
                    font-weight: 400;
                    color: #141414;
                    text-align: center;
                    line-height: 24/37.5rem;
                    background-color: #ffd11a;
                    border-radius: 10px;
                }
            }
            .commentClick {
                width: 40/37.5rem;
                height: 68/37.5rem;
                margin-left: 60/37.5rem;
                background: url("../../img/xzan@3x.png") no-repeat left center;
                background-size: 43/37.5rem 43/37.5rem;
                position: relative;
                .commentClickNumber {
                    position: absolute;
                    top: 10/37.5rem;
                    left: 23/37.5rem;
                    width: 40/37.5rem;
                    height: 24/37.5rem;
                    text-align: center;
                    line-height: 24/37.5rem;
                    font-size: 14/37.5rem;
                    font-weight: 400;
                    background-color: #ffd11a;
                    border-radius: 10px;
                }
            }
            .sendComment {
                width: 30/37.5rem;
                height: 68/37.5rem;
                margin-left: 60/37.5rem;
                background: url("../../img/XW_share@3x.png") no-repeat left center;
                background-size: 33/37.5rem 38/37.5rem;
            }
        }
    }
}